<template>
  <div class="bind-mobile">
    <div class="bind-mobile__icon">
      <svg-icon icon-class="modal-warning"></svg-icon>
    </div>
    <div class="bind-mobile__message">
      为了您的资金安全，请先绑定手机号码
    </div>
    <div class="bind-mobile__go-to">
      <div class="icon-link text-primary" @click="toBindMobile">
        <svg-icon icon-class="mobile" type="primary"></svg-icon>
        立即绑定
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "bind-mobile",

    methods: {
      toBindMobile() {
        this.$router.push({name: 'user-safety', params: {action: 'mobileContact'}});
        this.$store.commit(types.HIDE_CTRL);
      }
    }
  };
</script>

<style lang="scss" scoped>
  @include b(bind-mobile) {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin: 20px 0;
    @include e(icon) {
      flex: 1 0 0;
      margin-bottom: 20px;
      .svg-icon {
        width: 90px;
        height: 90px;
      }
    }

    @include e(message) {
      flex: 1 0 0;
      margin-bottom: 60px;
      color: $--color-black;
      text-align: center;
      line-height: 22px;
    }

    @include e(go-to) {
      width: 100%;
      flex: 1 0 0;
      text-align: center;
    }
  }
</style>